S3Slider con jQuery

Hace unos días visitando a Iván de Zona Cerebral encontré una entrada donde habla de S3Slider un plugin para jQuery con el que podemos crear un Slideshow muy atractivo.
Antes de crear el Slideshow debo aclarar que hay scripts que suelen crear conflictos y aunque jQuery es una librería con efectos sensacionales puede que al añadirla no se obtengan los resultados esperados.
No digo con eso que jQuery sea el problema, puede ser cualquier otro scripts que tengamos, es por eso que todos los ejemplos que pongo sobre jQuery los añado en otro blog.

Para el ejemplo yo me incliné por el Slideshow que en la página del autor se muestra con la imagen grande podéis ver el ejemplo en este enlace.

Los primeros pasos a seguir que siempre recomiendo es preparar las imágenes que vamos a añadir, luego ya podemos descargar los archivos tranquilamente.
Descarga de archivos

Una vez los descargamos los alojamos en nuestro servidor (cuando digo "nuestro" servidor me refiero al que solemos usar para alojar archivos que Blogger no permite, y por supuesto un sitio donde poder alojar archivos .js)

Nos situamos en plantilla Edición de HTML y sin expandir buscamos </head> justo antes de añadimos los scripts de la siguiente forma.

<script src='aquí-url-de-archivo-jquery.js' type='text/javascript'/>

<script src='aquí-url-de-archivo-s3Slider.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#s3slider&#39;).s3Slider({
timeOut: 3000

});
});
</script>

» En timeOut: 4000 podemos variar la velocidad para el efecto de la imagen.

Ayer comentaba sobre personalizar el scrosscol y dejé entrever que hoy el tema sería una bonita idea para incluir en él.
Esta era la idea, utilizar el crosscol para añadir un Slideshow, naturalmente no es la idea más maravillosa del mundo ni descubrí algo nuevo, pero el resultado es muy atractivo.

El siguiente paso es añadir el código html donde incluiremos las imágenes, lo haremos en un gadgets escogiendo HTML/Javascript ¿Y el lugar? eso depende donde vayamos a añadirlo, puede ser en cualquier sitio dependiendo del tamaño de las imágenes. En el ejemplo yo lo añadí en el espacio del famoso crosscol.

<div id="s3slider">

<ul id="s3sliderContent">

<li class="s3sliderImage">

<img src="url-imagen" />

<span>aquí-texto</span>

</li>

<li class="s3sliderImage">

<img src="url-imagen" />

<span>aquí-texto</span>

</li>

<div class="clear s3sliderImage"></div>

</ul>

</div>

» Si queremos más de dos imágenes añadimos

<li class="s3sliderImage">

<img src="url-imagen" />

<span>aquí-texto</span>

</li>

tantas veces como imágenes deseamos incorporar.

» Iván tuvo la genial idea de aplicar un enlace a cada imagen si deseamos que así sea en lugar de
<img src="url-imagen" />
pondríamos:

<a href="url-enlace"><img src="url-imagen"></a>

Ya sólo queda el último paso, añadir los estilos y nos vamos a plantilla otra vez para situarnos justo antes de ]]></b:skin>

/* s3slider

----------------------------------------------- */

#s3slider {

width: 720px; /* important to be same as image width */

height: 300px; /* important to be same as image height */

position: relative; /* important */

overflow: hidden; /* important */

}

#s3sliderContent {

width: 720px; /* important to be same as image width or wider */

position: absolute; /* important */

top: 0; /* important */

padding: 0px;

margin-left: 0; /* important */

}

.s3sliderImage {

float: left; /* important */

position: relative; /* important */

display: none; /* important */

}

.s3sliderImage span {

position: absolute; /* important */

left: 0;

font: 15px/20px Arial, Helvetica, sans-serif;

padding: 30px 13px;

width: 720px;

background-color: #000;

filter: alpha(opacity=70); /* here you can set the opacity of box with text */

-moz-opacity: 0.7; /* here you can set the opacity of box with text */

-khtml-opacity: 0.7; /* here you can set the opacity of box with text */

opacity: 0.7; /* here you can set the opacity of box with text */

color: #fff;

display: none; /* important */

bottom: 0;

/*

En esta última línea si ponemos

top: 0; -> la caja de texto se mostrará en la parte superior

si ponemos

bottom: 0; -> la caja de texto se mostrará en la parte inferior

*/

}

.clear {

clear: both;

}

» En este último código modificaremos las medidas, en s3slider y s3sliderContent hay que añadir las mismas medidas que tienen nuestras imágenes.
» En width ponemos el ancho de nuestra imagen. Y en height será el alto.
» En "s3sliderImage span" nos encontramos con background-color: #000; eso será el color del cuadro de texto.
» Una línea antes, donde width: 720px; es el ancho que tendrá el cuadro de texto.